// 第三方库
import { Card, Form, Input, Checkbox, Button, message } from 'antd';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';

// action
import { login } from '@/store/actions/login';
// 登录logo图片
import logo from '@/assets/logo.png';

// 样式
import './Login.scss';

export const Login = (props) => {
  // console.log(useSelector((state) => state));
  const dispatch = useDispatch();
  // 获取操作地址栏的history对象
  const history = useHistory();
  // console.log('Login props', props.history === history);
  console.log('登录页面111', history.location);
  // 表单校验通过回调函数
  const onFinish = async (values) => {
    console.log('准备发起请求：', values);
    try {
      // 发起请求
      // 使用 await 等待异步执行完毕
      await dispatch(login(values.mobile, values.code));
      // 读取跳转到login时的传值
      console.log('登录页面', history.location.state);

      // 登录成功跳转到home页面
      // history.push('/home'); // ['/home','login']
      // 读取跳转到login页面的信息，location.state 中，判断state是否存在，存在则读取回跳地址
      // history.replace('/home'); // ['login'] => ['/home']
      const path = history.location.state
        ? history.location.state.from
        : '/home';
      history.replace(path);
    } catch (error) {
      console.dir(error);
      // console.log('登录发生错误', error)
      // // 产品一句话，“登录错误，请重试”
      // // message.error('登录错误，请重试')
      // // 服务器的错误。
      // if (error.response) {
      //   message.warn(error.response.data.message)
      // } else {
      //   // 客户端的错误
      //   message.warn('网络错误，请检查你的网络')
      // }
      // // 发送你们公司服务器，要进行错误分析

      // 或者不else，使用 return
      // 搞定产品经理一句话搞定
      // message.warn('登录错误');
      // return;
      // 更好的实现
      // 判断错误类型
      if (!error.response) {
        message.warn('网络错误，请稍后再试');
        return;
      }
      // 响应具体的错误
      if (error.response && error.response.status === 400) {
        message.warn(error.response.data.message);
      }
    }
  };

  return (
    <div className="login">
      <Card
        className="login-card"
        bodyStyle={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        {/* 极客园图片 */}
        <img className="login-logo" src={logo} alt="login-logo" />
        {/* 表单元素 */}
        <Form
          initialValues={{
            remember: true,
            mobile: '13911111111',
            code: '246810',
          }}
          validateTrigger={['onBlur', 'onChange']}
          onFinish={onFinish}
          autoComplete={'off'} // 不自动添加之前输入过的值
        >
          {/* 手机号 */}
          <Form.Item
            name={'mobile'}
            rules={[
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对' },
              { required: true, message: '请输入手机号' },
            ]}
          >
            <Input size="large" placeholder="请输入手机号" maxLength={11} />
          </Form.Item>
          {/* 验证码 */}
          <Form.Item
            name={'code'}
            rules={[
              { len: 6, message: '验证码6个字符' },
              { required: true, message: '请输入验证码' },
            ]}
          >
            <Input size="large" placeholder="请输入验证码" maxLength={6} />
          </Form.Item>
          {/* 协议- checkbook */}
          <Form.Item name={'remember'} valuePropName={'checked'}>
            <Checkbox style={{ color: '#1890ff' }}>
              我已阅读并同意「用户协议」和「隐私条款」
            </Checkbox>
          </Form.Item>

          <Form.Item>
            <Button size="large" block type="primary" htmlType="submit">
              登 录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
